<template>
  <!-- <view class="flex m-v36"> -->
  <view :id="viewId" class="flex m-t18 filter-view" :class="[{ border: popupState.visible }]">
    <view class="flex-1 flex-sb" @click="togglePopup('area')">
      <text class="text-500-326" :class="[isArea && popupState.open ? 'text-500-526' : 'text-500-326']">工作区域</text>
      <image v-if="isArea && popupState.open" class="square-30" src="@/static/images/public/arrow-4.png" mode="" />
      <image v-else class="square-30" src="@/static/images/public/arrow-2.png" mode="" />
    </view>
    <view class="line" />
    <view class="flex-1 flex-sb" @click="togglePopup('industry')">
      <text class="text-500-326" :class="[isIndustry && popupState.open ? 'text-500-526' : 'text-500-326']">全部行业</text>
      <image v-if="isIndustry && popupState.open" class="square-30" src="@/static/images/public/arrow-4.png" mode="" />
      <image v-else class="square-30" src="@/static/images/public/arrow-2.png" mode="" />
    </view>
    <view class="line" />
    <view class="flex-1 flex-sb" @click="togglePopup('salary')">
      <text class="text-500-326" :class="[isSalary && popupState.open ? 'text-500-526' : 'text-500-326']">薪资范围</text>
      <image v-if="isSalary && popupState.open" class="square-30" src="@/static/images/public/arrow-4.png" mode="" />
      <image v-else class="square-30" src="@/static/images/public/arrow-2.png" mode="" />
    </view>
    <view class="line" />
    <view class="flex-1 flex-sb" @click="togglePopup('more')">
      <text class="text-500-326" :class="[isMore && popupState.open ? 'text-500-526' : 'text-500-326']">更多筛选</text>
      <image v-if="isMore && popupState.open" class="square-30" src="@/static/images/public/arrow-4.png" mode="" />
      <image v-else class="square-30" src="@/static/images/public/arrow-2.png" mode="" />
    </view>

    <view v-show="popupState.visible" class="filter-popup" :style="[{ top: `${offsetTop}px` }]">
      <view class="filter-popup__mask" :class="[{ open: popupState.open }]" @click="closePopup" />
      <view class="filter-popup__body" :class="[{ open: popupState.open }]">
        <AreaFilter v-if="isArea" @change="handleChange" />
        <IndustryFilter v-if="isIndustry" @change="handleChange" />
        <SalaryFilter v-if="isSalary" @change="handleChange" />
        <MoreFilter v-if="isMore" @change="handleChange" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, nextTick, onMounted, reactive, ref, defineEmits } from 'vue'
import AreaFilter from './area-filter.vue'
import IndustryFilter from './industry-filter.vue'
import SalaryFilter from './salary-filter.vue'
import MoreFilter from './more-filter.vue'
import { FilterType, useFiterType } from './useFilterType'
import { genRandomId, getNodeRect } from '@/utils/utils'
const emit = defineEmits(['change'])

const vm = getCurrentInstance()

const viewId = genRandomId('filterView')

const offsetTop = ref(0)

const popupState = reactive({
  visible: false,
  open: false,
})

const {
  isArea,
  isIndustry,
  isSalary,
  isMore,
  setType,
} = useFiterType()

//输出数据
function handleChange(title: string) {
  emit('change', title)
  closePopup()
}

const openPopup = (type: FilterType) => {
  setType(type)

  popupState.visible = true

  setTimeout(() => {
    popupState.open = true
  }, 100)
}

const closePopup = () => {
  popupState.open = false

  setTimeout(() => {
    popupState.visible = false
  }, 300)
}

const togglePopup = (type: FilterType) => {
  if (popupState.visible && popupState.open) closePopup()

  if (!popupState.visible && !popupState.open) openPopup(type)
}

const getDomRect = () => {
  getNodeRect(`#${viewId}`, vm).then((rect) => {
    offsetTop.value = rect.top! + rect.height!
  })
}

onMounted(() => {
  nextTick(getDomRect)
})
</script>

<style lang="scss" scoped>
.filter-view {
  position: relative;
  height: 86rpx;

  &.border {
    &::after {
      content: '';
      box-sizing: border-box;
      pointer-events: none;
      border: 0 solid $border-color-2;
      border-top-width: 1px;
      border-bottom-width: 1px;
      position: absolute;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      transform: scale(.5);
    }
  }
}

.line {
  height: 50rpx;
  margin: 0 16rpx;
  border-left: 1rpx solid #ECECEC;
}

.filter-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;

  &__mask,
  &__body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition-duration: 300ms;

    &.open {
      opacity: 1;
    }
  }

  &__mask {
    bottom: 0;
    background-color: rgba(#000, 0.6);
  }

  &__body {
    border-radius: 0 0 10rpx 10rpx;
    overflow: hidden;
    transform: translateY(-100%);

    &.open {
      transform: translateY(0);
    }
  }
}
</style>
